<template>
	<view id="walletPay">
		<Header txt="充值" v-if="baidu"></Header>
		<HeaderB txt="充值" v-if="!baidu"></HeaderB>
		<view class="part1">
			<text class="top-tit">充值金额</text>
			<view class="list">
				<view :class="[activeItem == 1 ? 'itm1' : '', 'item']" @click="select(1)">300</view>
				<view :class="[activeItem == 2 ? 'itm1' : '', 'item']" @click="select(2)">500</view>
				<view :class="[activeItem == 3 ? 'itm1' : '', 'item']" @click="select(3)">1000</view>
				<view :class="[activeItem == 4 ? 'itm1' : '', 'item']" @click="select(4)">5000</view>
				<view :class="[activeItem == 5 ? 'itm1' : '', 'item']" @click="select(5)">10000</view>
			</view>
			<view class="list2">
				<input type="number" v-model="activeMoney" @input="inputM" placeholder="请输入充值金额" /><br>
				<text class="info">充值{{activeMoney}},赠送{{extMoney}}元，实际到账{{ parseInt(Number(activeMoney) + Number(extMoney))}}元</text>
			</view>
		</view>
		<view class="part2">
			<text class="top-tit">充值方式</text>
			<view class="">
				<view class="active" @click="change(5)" v-if="alipay">
					<image  src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/zhifubao.png" mode="aspectFit"></image>
					<text>支付宝支付</text>
					<radio class="im" value="5" :checked="checked1" color="#007AFF" />
				</view>
				<view class="active" @click="change(6)" v-if="weixin">
					<image  src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/weixin.png" mode="aspectFit"></image>
					<text >微信支付</text>
					<radio class="im" value="6" :checked="checked2" color="#007AFF" />
				</view>
			</view>
		</view>		
		<!-- <view class="prompt_text">
			请勿在微信或QQ聊天窗口中打开此页面进行支付，请使用浏览器进行支付
		</view> -->
		<view class="btn" >
			<button type="" @click="goPay">去充值</button>
		</view>
	</view>
</template>

<script>
	import MD5 from '../../js_sdk/ccdzhang-dokey/md5.js';
	import QRCode  from '../../static/js/weapp-qrcode.js'　　// 导入外部的插件// 二维码生成工具
	import {formatDate2}  from  "../../common/com.js"
	// import AlipaySdk from 'alipay-sdk'
	export default {
		data() {
			return {
				activeMoney:300,
				payWay: 5,
				activeItem:1,
				extMoney:0,
				checked1:true,
				checked2:false,
				show1:false,
				baidu:true,
				number:'',
				innerHTML:'',
				image:'',
				isoptions:false,
				isoptions2:false,
				options:{
				        code: 'weixin://wxpay/bizpayurl?pr=AsRGM5qzz',// 生成二维码的值
				        size: 200,
						color: ['#11998e','#38ef7d']
				        },
				openid:'',
				weixin:true,
				alipay:true,
				rsaSign:'',
			};
		},
		watch: {
			"activeMoney": function (newVal) {
			 if (newVal == ''||newVal==0) {
			     this.activeMoney = "";
			     return
			   } else if (newVal == 300) {
			     this.activeItem = 1;
				 // this.goPay()
			   }else if (newVal == 500) {
			     this.activeItem = 2;
				 // this.goPay()
			   } else if (newVal == 1000) {
			     this.activeItem = 3;
				 // this.goPay()
			   } else if (newVal == 5000) {
			     this.activeItem = 4;
				 // this.goPay()
			   } else if (newVal == 10000) {
			     this.activeItem = 5;
				 // this.goPay()
			   } else {
			     this.activeItem = 0;
			   }
			   this.countPrice()
			 },
			"payWay": function (newVal) {
				if(newVal==5){
					this.checked1=true
					this.checked2=false
				}else if(newVal==6){
					this.checked1=false
					this.checked2=true
				}
			}
		},
		onLoad(){
			// #ifdef MP-WEIXIN
			this.payWay=6
			this.weixin=true
			this.alipay=false
			// #endif
			// #ifdef  MP-ALIPAY
			this.payWay=5
			this.weixin=false
			this.alipay=true
			// #endif 
			// #ifdef MP-BAIDU
			this.payWay=5
			this.weixin=false
			this.alipay=false;
			this.baidu=false
			// #endif
		},
		methods: {
			submit(){
			},
			inputM(){
			},
			change(num){
				this.payWay=num
			},
			countPrice(){				
				let that=this
				this.$store
				  .dispatch("GetFixedGift",{payMoney:this.activeMoney})
				  .then((response) => {
					  if(response.data.code==0){
						  that.extMoney = response.data.obj;
					  }else{
						  this.$store.commit("SET_ERRORINFORMATION", {
						    mes:  response.data.msg,
						    icon: "error",
						  });
					  }
				  })
				  .catch(() => {})
			},
			select(num) {
				if (num == 1) {
					this.activeMoney = 300;
				}
				if (num == 2) {
				  this.activeMoney = 500;
				}
				if (num == 3) {
				  this.activeMoney = 1000;
				}
				if (num == 4) {
				  this.activeMoney = 5000;
				}
				if (num == 5) {
				  this.activeMoney = 10000;
				}       
			},
			AliPay(data){
				let that=this
				let orderD=data
				let  activeMoney=that.activeMoney*100
				uniCloud.callFunction({
				    name: 'user-common2',
					data:{
						totalFee: activeMoney, 
						outTradeNo:data,
						openid:uni.getStorageSync("alipayId").id,
						subject:'熊猫代理',
					},				
				    success(res) {		
						console.log("成功1233",res.result.orderInfo);
						uni.requestPayment({
							orderInfo: res.result.orderInfo,
							success(){
								that.getisSuccess(orderD)
							},
							fail(){
								that.getisSuccess(orderD)
							}																							 																																 
						})			   
				    },
					fail(){
						that.getisSuccess(orderD)
					}
				})	
			},
			baiduwx(data){
				let that=this
				let orderD=data
				let  activeMoney=that.activeMoney*100 
				this.$store
				.dispatch("BaidupaySign",{chargeNo:orderD})
				.then((response) => {
					if(response.data.code==0){
						that.rsaSign=response.data.obj
						that.nextPay(orderD)
					}	
				  })
				  .catch(() => {});	 
			},
			wxpay(data){
				let that=this
				let orderD=data
			   that.openid=uni.getStorageSync("wxId").id
			   let  activeMoney=that.activeMoney*100 
			   uniCloud.callFunction({
			       name: 'user-common',
					data:{
						totalFee: activeMoney, 
						outTradeNo:data,
						openid:that.openid,
						subject:''
					},
			       success(res) {
					   that.options.code=res.result.orderInfo.codeurl
					   that.isoptions2=true
					   uni.requestPayment({
						   ...res.result.orderInfo,
							success(){
								that.getisSuccess(orderD)
							},
							fail(){
								that.getisSuccess(orderD)
							}
					   })
			       },
				   fail(){
					   that.getisSuccess(orderD)
				   }
			   })
			},
			getisSuccess(data){
				let that=this
				let obj={
					chargeNo:data
				}
				that.$store
					.dispatch("IsSuccess",obj)
					.then((response) => {
					})
			},
			nextPay(e) {
				let that=this
				let  activeMoney=that.activeMoney*100 
				let dtr={
					"dealId":2566984488,
					"appKey":"MMU2KF",
					"totalAmount":activeMoney,
					"tpOrderId":e,
					"notifyUrl":'https://vips.xiongmaodaili.com/xiongmao-web/trade/baiduNotify',
					"dealTitle":'熊猫代理',
					"signFieldsRange": 1,
					"rsaSign":this.rsaSign,
				}
			    swan.requestPolymerPayment({
			        orderInfo: dtr,
			        success: res => {
			            swan.showToast({
			                title: '支付成功',
			                icon: 'success'
			            });
			            console.log('success', res);
			        },
			        fail: err => {
			            swan.showToast({
			                title: err.errMsg,
			                icon: 'none'
			            });
			            console.log('fail', err);
			        }
			    });    
			},
			couponQrCode(data) {
							new QRCode('myQrcode', {
								text: data,
								width: 100,
								height: 100,
								colorDark: "#333333",
								colorLight: "#FFFFFF",
								correctLevel: QRCode.CorrectLevel.H
							})
						},
			buy(changeNo){						
				let that=this				
				if(that.payWay==6){
					// #ifdef MP-WEIXIN
					that.wxpay(changeNo)
					// #endif
					
				}else if(that.payWay==5){
					// #ifdef  MP-ALIPAY
					that.AliPay(changeNo)					
					// #endif 
				}
				// #ifdef MP-BAIDU
				that.baiduwx(changeNo)
				// #endif
			},
			formSubmit(e){
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
			},
			goPay(){
				let that = this;
				if (that.activeMoney <= 0) {
				  this.$store.commit("SET_ERRORINFORMATION", {
				    mes: "请输入正确的金额",
				    icon: "error",
				  });
				  return false;
				}
				if (that.activeMoney % 10 != 0) {
				  this.$store.commit("SET_ERRORINFORMATION", {
				    mes: "请以10的倍数进行充值",
				    icon: "error",
				  });
				  return false;
				} 
				this.$store
				.dispatch("Recharge",{money:this.activeMoney})
				.then((response) => {
					if(response.data.code==0){
						that.buy(response.data.obj)
					}					  
				  })
				  .catch(() => {});	 
			}
		},
	}
</script>

<style lang="less">
#walletPay{
	width: 92%;
	margin: 0 auto;
	padding: 30rpx 0;
	overflow: hidden;
	.codewx{
		// width: 150rpx;
		height: 200rpx;
		padding-left: 24rpx;
		position: relative;
		.canvas{
				width: 200upx;height: 200upx;
			}
		.text{
			position: absolute;
			right: 25%;
			top: 40%;
			color: #007AFF;
		}
	}
	.prompt_text{
	    background-color: #FFF8E8;
	    font-size: 26rpx;
	    color: #E78258;
	    padding: 20rpx;
	    margin-bottom: 20rpx;  
	}
	.part2{
		margin-top: 50rpx;
	}
	.list2{
		text-align: center;
		input{
		    width: 60%;
		    margin: 0 auto;
		    border: none;
		    font-size: 34rpx;
		    font-weight: bold;
		    text-align: center;
		    margin-top: 60rpx;
		    border-bottom: 1px solid #e5e5e5;
		    padding-bottom: 20rpx;	
		}
		.info{
			font-size: 24rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			color: #222;
			margin-top: 20rpx;    
		}
	}
	.list{	
		.item{
			display: inline-block;
			text-align: center;
			width: 180rpx;
			height: 80rpx;
			background: #fafafa;
			border-radius: 16rpx;
			// float: left;
			margin: 30rpx 0 0 30rpx;
			line-height:80rpx;
			font-size: 30rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			color: #222;    
		}
		.itm1{
			background: #486ef5;
			color: #fff;
		}
	}
	.top-tit{
		font-size: 34rpx;
		color: #222;
		font-weight: bold;
	}
	.active{
		padding-left: 24rpx;
		height: 100rpx;
		line-height: 100rpx;
		text{
			display: inline-block;
			width: 400rpx;
		}
		input{
			display: inline-block;
			color: #FFFFFF;
		}
		.im{
			display: inline-block;
			margin-left: 150rpx;
			position: relative;
			top: -5rpx;
		}	
	}
	.btn{
		margin-top: 80rpx;
		button{
			border: none;
			width: 80%;
			border-radius: 70rpx;
			background: #007AFF;
			color: #FFFFFF;
		}
	}
	image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		position: relative;
		top: 5rpx;
	}
}
</style>
